/* 订单管理页面样式 */

/* 页面容器 */
.orders-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 70px);
}

/* 页面标题和工具栏 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.title-container {
  display: flex;
  align-items: center;
}

.page-title {
  margin: 0;
  margin-right: 15px;
  font-size: 22px;
  font-weight: 600;
  color: #303133;
}

/* 筛选区域 */
.filter-container {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 订单表格 */
.orders-table {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 表格行高亮效果 */
.el-table .el-table__row:hover {
  background-color: #f5f7fa;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding: 10px 0;
}

/* 订单详情对话框样式 */
.order-items {
  margin-top: 20px;
}

.order-items h3 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.order-summary {
  margin-top: 20px;
  border-top: 1px solid #EBEEF5;
  padding-top: 15px;
}

.summary-item {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.summary-item .label {
  margin-right: 15px;
  color: #606266;
}

.summary-item .value {
  width: 120px;
  text-align: right;
  font-weight: 500;
}

.summary-item.total {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
  margin-top: 10px;
  border-top: 1px dashed #EBEEF5;
  padding-top: 10px;
}

.dialog-footer {
  margin-top: 20px;
  text-align: right;
}

/* 订单状态标签定制样式 */
.el-tag.el-tag--warning {
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #e6a23c;
}

.el-tag.el-tag--success {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}

.el-tag.el-tag--primary {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  color: #409eff;
}

.el-tag.el-tag--info {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
}

.el-tag.el-tag--danger {
  background-color: #fef0f0;
  border-color: #fde2e2;
  color: #f56c6c;
}

/* 操作按钮样式 */
.el-button--primary.is-plain {
  color: #409eff;
  background: #ecf5ff;
  border-color: #d9ecff;
}

.el-button--success.is-plain {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #e1f3d8;
}

.el-button--danger.is-plain {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fde2e2;
}

/* 响应式样式 */
@media (max-width: 1200px) {
  .el-form-item {
    margin-bottom: 18px;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .actions {
    margin-top: 15px;
    align-self: flex-end;
  }
  
  .el-form--inline .el-form-item {
    display: block;
    margin-right: 0;
  }
} 

/* Filter Container Specific Styles for inline layout */
.filter-container .el-form--inline .el-form-item {
  margin-right: 8px; /* 减小表单项之间的右边距 */
  margin-bottom: 10px; /* 保持一定的底部间距，以防换行时过于拥挤 */
}

/* 为筛选区域内的输入框和选择器设置基础宽度 */
.filter-container .el-form-item .el-input,
.filter-container .el-form-item .el-input__inner { /* Element Plus input 的内部元素也可能需要指定 */
  width: 180px; 
}

.filter-container .el-form-item .el-select {
  width: 150px; /* 为订单状态选择器设置特定宽度 */
}

/* 特别为日期范围选择器设置宽度，因为它通常需要更宽的空间 */
.filter-container .el-form-item .el-date-editor--daterange.el-input__inner,
.filter-container .el-form-item .el-date-editor--daterange {
  width: 240px !important; /* 确保宽度生效 */
}

/* 覆盖已有的全局 el-select 宽度设置，使其在 filter-container 中有特定宽度 */
/* 您之前有一个 .orders-container .el-select { width: 160px !important; } 的规则 */
/* 如果需要让订单状态选择器宽度严格为某个值，例如140px，并且覆盖全局规则 */
.filter-container .el-form-item .el-select[placeholder="请选择订单状态"] { /* 更精确地定位订单状态选择器 */
  width: 140px !important; 
}

/* 移除最后一个表单项（通常是按钮组）的右边距，使其更贴合边缘 */
.filter-container .el-form--inline .el-form-item:last-child {
  margin-right: 0;
}

.orders-container .el-select {
  width: 160px !important; /* 统一设置宽度 */
}